import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// 计数器
/// 点击一下就向上翻一个数字
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _beginValue = 10;

  // double endValue = 10;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: TweenAnimationBuilder<double>(
          // tween: Tween(begin: _beginValue, end: _beginValue + 1),
          tween: Tween(end: _beginValue),
          duration: Duration(milliseconds: 700),
          builder: (BuildContext ctx, double value, Widget? child) {
            // 小数部分
            double decimal = value - _beginValue;
            return Center(
              child: Container(
                color: Colors.blue[100],
                width: 300,
                height: 50,
                child: Stack(
                  children: [
                    Positioned(
                      // 将 n ~ n+1 表示成 0 ~ -50
                      // 0 ~ 1 表示成 0 ~ -50
                      // 小数部分 * (-50)
                      top: decimal * (-50),
                      // top: 0,
                      child: Opacity(
                        // 透明度, 1 ~ 0
                        opacity: 1 - decimal,
                        child: Text(
                          _beginValue.toString(),
                          // '1',
                          style: TextStyle(fontSize: 50),
                        ),
                      ),
                    ),
                    Positioned(
                      // 将 0-1 表示成 50 ~ 0
                      // top: 50,
                      top: (1 - decimal) * 50,
                      child: Opacity(
                        opacity: decimal,
                        child: Text(
                          (_beginValue + 1).toString(),
                          style: TextStyle(fontSize: 50),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            setState(() {
              _beginValue--;
            });
          },
        ),
      ),
    );
  }
}
